<template>
  <div>
    <!-- 动态class,让类名根据boolean值来决定是否添加 
          :class="{类名:boolean值}"
    -->
    <!-- 动态style,动态设置css样式 css属性名 css属性值
          :style="{color:color}"
    -->
    <p :class="{ fontColor: bl }">赖酱是猪</p>
    <h3 :style="{ color }">胡文帅是猪</h3>
  </div>
</template>

<script>
export default {
  name: "VueBaseApp",

  data() {
    return {
      bl: true,
      color:"blue"
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style>
.fontColor {
  color: teal;
}
</style>